<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
        <link rel="stylesheet" href="../libs/AdminLTE-2.4.18/bower_components/bootstrap/dist/css/bootstrap.css"> 
        <link rel="stylesheet" href="../libs/AdminLTE-2.4.18/bower_components/font-awesome/css/font-awesome.min.css"> 
        <script src="../libs/AdminLTE-2.4.18/bower_components/jquery/dist/jquery.js"></script>
        <script src="../libs/AdminLTE-2.4.18/bower_components/bootstrap/dist/js/bootstrap.js"></script>
        <script src="../libs/sdk/date.js"></script>
        <script src="../libs/sdk/json.js"></script>
        <script src="../libs/sdk/hhls.js"></script>
        <script src="../libs/sdk/hhIotGateway.js"></script>
        <script src="../libs/sdk/kurento-client.js"></script>
        <script src="../libs/sdk/kurento-utils.js"></script>
        <script src="../libs/sdk/vue.js"></script> 
        <script src="js/clientUtils.js"></script> 
        <script src="js/kmsClient.js"></script>  

    
        <title>专家支持</title>

    </head>
    <body>
        <style>
            html , body , #expert{ width: 100%; height: 100%; padding: 0; margin: 0; background-color: #212836; color: #fafafa;}
            ul{ padding: 0; margin: 0; list-style: none;}
 
        </style> 
        <style>
            .divTool{
                padding: 10px;
                margin-bottom: 10px;
            }
            .divVideo{
                position: relative;
                height: 0;
                padding-bottom: 56.2%;
            }
            .divVideo video{
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: #222;
            }
        </style>
        <div style="padding: 20px;">
            <div class="divTool">
                <button class="btn btn-sm btn-default">open</button>
            </div>
            <div class="row">
                <div class="col-lg-6">
                    <div class="divVideo">
                        <video muted autoplay id="lv1"></video>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="divVideo">
                        <video muted autoplay id="rv1"></video>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="divVideo">
                        <video muted autoplay id="lv2"></video>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="divVideo">
                        <video muted autoplay id="rv2"></video>
                    </div>
                </div>
            </div>
        </div>
        <script> 
            $(document).ready(function(){
                var client = new TKmsClient();
                var clientPeer1 = null;
                var clientPeer2 = null;
                var appId = "hhAppPipe";
                client.open().then(()=>{

                    var peerCode =  appId;
                    var lv = document.getElementById('lv1');
                    var rv = document.getElementById('rv1');
                    client.createPeer( appId +"-1" , 'sr' , document.getElementById('lv1') , document.getElementById('rv1')).then(cp1=>{
                        clientPeer1 = cp1;
                        client.createPeer( appId +"-2" , 'sr' , document.getElementById('lv2') , document.getElementById('rv2')).then(cp2=>{
                            clientPeer2 = cp2;
                            console.log( clientPeer1.endId , clientPeer2.endId);
                            client.connectMedia(clientPeer1.endId , clientPeer2.endId);
                            client.loadPlayer('p1' , 'rtsp://admin:hhuc1115@ssl.hhdata.cn:1555?channel=2&subtype=1').then(player=>{
                                console.log(player);
                            })
                        });
                    })
                })
            })
        </script>
    </body>
</html>